﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../styles/css/index.css">
    <script src="../lib/layui/layui.js"></script>
    <script src="../lib/JQuery.js"></script>

    <style>
        html,
        body {
            height: calc(100% - 2px);
            width: 100%;
        }
        #chartmain{
            height: 342px;
            width: 100%;
        }
    </style>
</head>

<body>
<div class="headTitle">
    所有地块
</div>
<div class="sideListout">
    <div class="leftBox">
        <div id="test1"></div>
        <div class="hidden">
            <div class="sanjiao" state="false"></div>
        </div>
    </div>
    <div class="rightBox">
        <div class="tableOuter">
            <div class="tableHeader">
                折线
            </div>
            <div class="right-top" id="chartmain"></div>
        </div>
        <div class="right-bottom">
            <div class="tableOuter">
                <div class="tableHeader">
                    列表
                </div>
                <table id="demoTable" lay-filter="test"></table>
            </div>
        </div>
    </div>
</div>
</body>

</html>
<script src="../lib/echarts.js"></script>
<script>
    layui.use(['table', 'jquery'], function () {
        var table = layui.table;
        var $ = jQuery = layui.$;
        //第一个实例
        table.render({
            elem: '#demoTable',
            //					height: 315
            //  ,url: '/demo/table/user/' //数据接口
            //						,
            page: true //开启分页
            ,
            cols: [
                [ //表头
                    /*{
                        field: 'dkmc',
                        title: '地块名称',
                        align: 'center',
                        width: '20%'
                    }, {
                    field: 'cjsj',
                    title: '种植作物',
                    align: 'center',
                    width: '20%',
                    sort: true
                }, {
                    field: 'sbid',
                    title: '叶龄',
                    align: 'center',
                    width: '15%'
                }, {
                    field: 'sblx',
                    title: '分蘖数',
                    align: 'center',
                    width: '15%'
                }, {
                    field: 'gz',
                    title: '叶片长度',
                    width: '12%',
                    sort: true,
                    align: 'center',
                }, {
                    field: 'kqsd',
                    title: '叶片宽度',
                    width: '12%',
                    sort: true,
                    align: 'center',
                }, {
                    field: 'trsf',
                    title: '叶面积',
                    width: '12%',
                    sort: true,
                    align: 'center',
                }, {
                    field: 'trwd',
                    title: '光合面积',
                    width: '12%',
                    sort: true,
                    align: 'center',
                }*/
                    {
                        field: 'dkmc',
                        title: '序号',
                        width:'10%',
                        align: 'center',
                        fixed: 'left'
                    }, {
                    field: 'sbid',
                    title: '叶龄',
                    width:'15%',
                    align: 'center',
                }, {
                    field: 'kqsd',
                    title: '叶长',
                    width:'15%',
                    align: 'center',
                }, {
                    field: 'sblx',
                    title: '分蘖数',
                    width:'20%',
                    align: 'center',
                }, {
                    field: 'trwd',
                    title: '有效光合面积',
                    align: 'center',
                    width:'20%',
                },
                    {
                        field: 'gz',
                        title: '叶色(饱和度)',
                        align: 'center',
                        width:'10%',
                    },
                    {
                        field: 'gz',
                        title: '叶色(色度)',
                        align: 'center',
                        width:'10%',
                    }
                ]
            ],
            data: [{
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }, {
                "id": "<div><input type='checkbox'></div>",
                "dkmc": "地块",
                "cjsj": "男",
                "sbid": "浙江杭州",
                "sblx": "人生恰似一场修行",
                "gz": "116",
                "kqsd": "116",
                "trsf": "地块",
                "trwd": "男",
                "dcdl": "浙江杭州",
                "dy": "人生恰似一场修行",
                "yl": "116",
            }]
        });
        $('.demoTable .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    layui.use(['tree', 'util'], function () {
        var tree = layui.tree,
            layer = layui.layer,
            util = layui.util,
            nodes = [{ // 树分支数据
                title: '江西',
                id: 1,
                children: [{
                    title: '南昌',
                    id: 1000,
                    children: [{
                        title: '青山湖区',
                        id: 10001
                    }, {
                        title: '高新区',
                        id: 10002
                    }]
                }, {
                    title: '九江',
                    id: 1001
                }, {
                    title: '赣州',
                    id: 1002
                }]
            }, {
                title: '广西',
                id: 2,
                children: [{
                    title: '南宁',
                    id: 2000
                }, {
                    title: '桂林',
                    id: 2001
                }]
            }, {
                title: '陕西',
                id: 3,
                children: [{
                    title: '西安',
                    id: 3000
                }, {
                    title: '延安',
                    id: 3001
                }]
            }]
        tree.render({
            elem: '#test1',
            data: nodes,
            showLine: false, //是否开启连接线
            click: function (obj) {
                var data = obj.data; //获取当前点击的节点数据
                layer.msg(obj);
            },
            showCheckbox: true,
            oncheck: function (obj) { //勾选时触发获取勾选数据
                alert(obj)
            }
        });
    });
    //echarts
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['地块1', '地块2', '地块3', '地块4', '地块5'],
            x: 'right'
        },
        toolbox: {
            show: false,
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            boundaryGap: false,
            data: ['地块1', '地块2', '地块3', '地块4', '地块5', '地块6', '地块7']
        }],
        yAxis: [{
            type: "value",
            scale: !0,
            splitArea: {//背景条纹
                show: true,
                areaStyle: {
                    color: [
                        'rgba(255,255,255,0)',
                        'rgba(242,243,248,1)'
                    ]
                }
            }
        }],
        series: [
            {
                name: '地块1',
                type: 'line',
                stack: '总量',
                smooth: true,
                showSymbol: !1,
                data: [120, 132, 101, 134, 90, 230, 210,]
            },
            {
                name: '地块2',
                type: 'line',
                stack: '总量',
                smooth: true,
                showSymbol: !1,
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: '地块3',
                type: 'line',
                stack: '总量',
                showSymbol: !1,
                smooth: true,
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: '地块4',
                type: 'line',
                stack: '总量',
                smooth: true,
                showSymbol: !1,
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: '地块5',
                type: 'line',
                stack: '总量',
                showSymbol: !1,
                smooth: true,
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    var myChart = echarts.init(document.getElementById('chartmain'));
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<script src="../js/index.js"></script>